<template>
	<view class="">
		<view class="btn dis">
			<view class="btn-wrap dis">
				<view v-for="(item,index) in list" @click="btns(index)" :class="btnIndex==index?'activeBtn':''"
					:key="index">{{item.tit}}</view>
			</view>


		</view>
		<view style="height: 100rpx;">

		</view>
		<view class='searchGood'>
			<view class="dis navBtnWrap">
				<view class="navBtn-left" @click="chooseLocation">
					{{locationMsg||'选择地址'}}
				</view>
				<view class="navBtn-right1">
					<view class='search acea-row row-between-wrapper'>
						<view class='input acea-row row-between-wrapper'>
							<text class='iconfont icon-sousuo2'></text>
							<input type='text' :value='searchValue' :focus="focus" placeholder='点击搜索店铺名'
								placeholder-class='placeholder' @input="setValue"></input>
							<image style="width: 30rpx;height: 30rpx;margin-left: 10rpx;" @click="cleanKeyWord"
								src="@/static/com/icon_close.png" mode=""></image>
						</view>
						<view class='bnt' @tap='searchBut'>搜店铺</view>
					</view>
				</view>

			</view>
		</view>
		<view class="dis navBtnWrap">
			<!-- <view class="navBtn-left" @click="chooseLocation">
				选择地址
			</view> -->
			<view class="navBtn-right dis">
				<view v-for="(item,index) in navList" :class="navIndex==index?'navActive':''" @click="navBtn(index)"
					:key="index">{{item.tit}}</view>

			</view>

		</view>
		<view v-if="btnIndex==0">
			<view v-if="CateringList.length!=0">
				<list type='1' :list="CateringList"></list>
			</view>
			<view v-else>

				<noData></noData>
			</view>

		</view>
		<view v-if="btnIndex==1">
			<view v-if="HotelList.length!=0">
				<list type='2' :list="HotelList"></list>
			</view>
			<view v-else>

				<noData></noData>
			</view>

		</view>
		<home></home>
	</view>
</template>

<script>
	import home from '@/components/home/index.vue'
	import noData from '@/components/com/noData.vue'
	import {
		getCateringList,
		getHotelList
	} from "@/api/togeterRich/index.js"
	import list from '@/pagesA/BeautifulEconomy/com/index.vue'
	export default {
		components: {
			list,
			noData,
			home
		},
		data() {
			return {
				locationMsg: '',
				location: {
					latitude: 0,
					longitude: 0,
				},
				locationData: {},
				navData: {
					popularityOrder: '',
					distanceOrder: '',
					salesOrder: ''
				},
				navList: [{
						tit: '销售'
					},
					{
						tit: '距离'
					},
					{
						tit: '人气'
					}
				],
				navIndex: 0,
				btnIndex: 0,
				list: [{
					tit: '餐饮'
				}, {
					tit: '民宿'
				}, ],
				CateringList: [],
				HotelList: []
			}
		},
		onLoad() {
			this.locationData = uni.getStorageSync('location');
			if (this.locationData) {
				this.location = {
						latitude: this.locationData.latitude,
						longitude: this.locationData.longitude,
					},
					this.regexAddressBean(this.locationData.address)
				console.log("111")
			}
			this.init()
		},
		methods: {
			init() {
				this.CateringList = []
				this.HotelList = []
				let data = {
					...this.location,
					...this.navData
				}
				if (this.btnIndex == 0) {

					getCateringList(data).then(rews => {

						this.CateringList = this.CateringList.concat(rews.data.list)
					})
				} else {
					getHotelList(data).then(rews => {
						this.HotelList = this.HotelList.concat(rews.data.list)

					})

				}

			},
			navBtn(index) {
				this.navIndex = index
				if (this.navIndex == 0) {
					this.navData.salesOrder = "DES"
				} else if (this.navIndex == 1) {
					this.navData.distanceOrder = "ASC"
				} else {
					this.navData.popularityOrder = "DES"
				}
				this.init()

			},
			chooseLocation() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						that.regexAddressBean(res.address)
						uni.setStorageSync('location', res);
						that.location = {
							latitude: res.latitude,
							longitude: res.longitude,
						}
						console.log(res, 'sdd ')
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					},
					fail(err) {
						console.log(err, 'ddddd')
					}
				});
			},

			btns(index) {
				this.btnIndex = index
				this.init()
			},
			regexAddressBean(address) {

				var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;

				var province = [];
				var addressBean = {
					province: null,
					country: null,
					city: null,
					address: null,
				};

				// console.log('address', address);
				// console.log('addressBean', addressBean);
				regex = /^(.*?[市]|.*?[州]|.*?地区|.*?特别行政区)(.*?[区]|.*?[市]|.*?[县])(.*?)$/g;
				var addxress = regex.exec(address);
				console.log('addxress', addxress);
				this.locationMsg = addxress[1]

				return addxress[1];

			}
		}

	}
</script>

<style lang="scss" scoped>
	.searchGood .search {

		background-color: #fff !important;
	}

	.searchGood .search {}

	.searchGood .search .input {
		// width: 598rpx;
		background-color: #f7f7f7;
		border-radius: 33rpx;

		box-sizing: border-box;
		height: 66rpx;
		padding: 0px 10rpx;
	}

	.searchGood .search .input input {
		align-items: center;
		font-size: 26rpx;
		margin-right: 10rpx;
	}

	.searchGood .search .input .placeholder {
		color: #bbb;
	}

	.searchGood .search .input .iconfont {
		color: #000;
		font-size: 35rpx;
	}

	.searchGood .search .bnt {
		width: 120rpx;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 24rpx;
		margin-right: 6px;
		color: #fff;
		background: $maincolor;
		border-radius: 30px 30px 30px 30px;
		opacity: 1;

	}

	.searchGood .title {
		font-size: 28rpx;
		color: #999;
		margin: 50rpx 30rpx 25rpx 30rpx;
		justify-content: space-between;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.searchGood .list {
		padding-left: 10rpx;
	}

	.searchGood .list .item {
		font-size: 26rpx;
		color: #454545;
		padding: 0 21rpx;
		/* height: 60rpx; */
		border-radius: 30rpx;
		/* line-height: 60rpx; */

		margin: 0 0 20rpx 20rpx;
		padding: 8rpx 37rpx;
		background: #F1F1F1;
	}

	.searchGood .line {
		border-bottom: 1rpx solid #eee;
		margin: 20rpx 30rpx 0 30rpx;
	}

	.navActive {
		font-weight: 600;
		border-bottom: 2rpx solid $maincolor;
	}

	.navBtnWrap {
		padding: 30rpx;
		margin: 0 auto;
		justify-content: space-between;
		background: #fff;
		align-items: baseline;
		border-top: 1rpx solid #f5f5f5;

		.navBtn-left {
			width: 30%;
		}

		.navBtn-right1 {

			justify-content: space-around;

			.input {
				width: 70%;

				input {
					width: 66%;
				}
			}

			view {
				padding-bottom: 20rpx;
			}
		}

		.navBtn-right {
			justify-content: space-around;
			width: 100%;


			view {
				padding-bottom: 20rpx;
			}
		}
	}

	.activeBtn {
		// border: 2rpx solid $maincolor;
		color: #fff !important;
		background: $maincolor;
	}

	.btn {
		width: 100%;
		margin: 0 auto;
		height: 100rpx;
		position: fixed;
		background: #fff;
		top: 0;

		.btn-wrap {
			margin: 0 auto;
			justify-content: space-around;
			width: 60%;

			view {
				font-size: 28rpx;
				width: 150rpx;
				text-align: center;

				height: 60rpx;
				line-height: 60rpx;
				border-radius: 500rpx;
				border: 1rpx solid #f5f5f5;
				color: #000;
			}
		}

	}
</style>